<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul,li{list-style: none}
        .nav{width: 100%;height: 60px;background: #ccc;}
        .nav>ul{display: flex;text-align: center;line-height: 60px;}
        .nav>ul>li{flex:1;border-left:solid 1px #fff;border-right:solid 1px #fff;position: relative;}

        .nav>ul>li:last-child ul ul{left:-200px;}

        .nav li:hover{background: red}

        .nav>ul>li>ul{position: absolute;left:0;top:60px;width: 100%;}
        .nav>ul>li>ul{display: none;}
        .nav>ul>li>ul>li{position: relative;}

        .nav ul ul ul{position: absolute;right:-200px;width: 200px;line-height: 40px;background: #efefef;top:0}
        .nav ul ul ul{display: none;}
    </style>
</head>
<script src="./jquery.js"></script>
<script>
    $(function(){

        $(".nav").find("li").hover(function(){
            $(this).children("ul").show();
        },function(){
            $(this).children("ul").hide();
        })

    })
</script>
<body>
    <div class="nav">
        <ul>
            <li>
                <span>一级菜单</span>
                <ul>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>一级菜单</span>
                <ul>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>一级菜单</span>
                <ul>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>一级菜单</span>
                <ul>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                    <li>
                        <span>二级菜单</span>
                        <ul>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                            <li>三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
    
</script>
</html>